<template>
  <div class="mybody">
    <input type ="text" v-model="wordname" placeholder="请输入要查找的单词" @keyup.enter="search(wordname)"
           class="myinput mymargin"/>
    <button v-on:click="search(wordname)" class="button2">查找</button>
    <button v-on:click="clear" class="button2">清空</button><br /> <br />
    <div>
      {{translation}}
    </div>
    <br>
    <br>
    <br>
    <div v-if="translation">
      <button v-on:click="addmyword(wordname)" >添加到我的词库</button>
    </div>
  </div>
</template>

<script>
    import store from "../store/store";
    import {Toast} from "mint-ui";


    export default {
      name: "Tool",
      data () {
        return {
          id:null,
          wordname:null,
          translation:null,
        }
      },
      methods: {
        back(){
          this.$router.go(-1);//返回上一层
        },
        search:function () {
          var params = new URLSearchParams()
          params.append('wordname', this.wordname)
          this.$axios.post('/selectenword',
            params
          )
            .then(res => {
              console.log(res)
              if(res.data.data != null){
                this.translation=res.data.data.translation
              }else{
                Toast("抱歉，未找到此单词")
              }
            })
        },
        addmyword:function (translation) {
          var params = new URLSearchParams()
          params.append('translate', this.translation)
          params.append('name', this.wordname)
          params.append('uid',store.state.id)
          this.$axios.post('/addword',
            params
          )
            .then(res => {
              if(res.data.data!=null){
                this.id = res.data.data.id
                this.$bus.emit('addword',this.id, this.wordname,this.translation);
                this.id = null,
                this.wordname=null,
                  this.translation=null
              }
            })
        },
        clear(){
          this.id = null,
            this.wordname=null,
            this.translation=null
        },
      },
    }
</script>

<style scoped>
  .text{
    width: 80%;
    height: 110px;
    background-color:#E5E5E5;
    box-shadow: 3px 3px 6px 6px #888888;
    margin-left: 10%;
    margin-top: 4%;
    font-family: 微软雅黑;
    font-size: 3vh;
    padding: 1%;
  }
  .myinput{
    width:90%;height:40px;border:2px #fdfaf8;float:left;
    background-color: #fffcf9;
  }
  .mymargin{
    margin-top: 2px;
    margin-left: 10px;
    /*margin-right: 10px;*/
    margin-bottom: 10px;
  }
  .mybody{
    border:1px solid #a09e9d;position:fixed;top:0px;float:inherit;width:100%;
    left: 0px;
  }
</style>
